<?php
	require_once("utils/logged_in.php");
?>
<html>
<head>

<!-- For use in Facebook -->
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.override.css" />
<link rel="stylesheet" type="text/css" href="../css/multiColumn.css" />
<link rel="stylesheet" href="../css/menu_style.css" type="text/css" media="all" />
<script type="text/javascript" src="../js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.quicksand.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.ezpz_tooltip.js"></script>

<script type="text/javascript"><!--

function updateCardClickBinding()
{
	$('.card .cardImg').click(
		function()
		{
			var cardImageFront = $(this).find('.cardImg img').attr('src');
			var cardImageBack = cardImageFront.replace('_f', '_b');
			var dialog = $(''.concat(
				'<table>',
					'<tr>',
						'<td>',
							'<img src="', cardImageFront, '" width="275" height="375"/>',
						'</td>',
						'<td>',
							'<img src="', cardImageBack, '" width="275" height="375"/>',
						'</td>',
					'</tr>',
				'</table>'
			));
			dialog.dialog({
				modal:true,
				resizable:false,
				draggable:false,
				width: 588
			});
		}
	);
}

function loadCards(options)
{
	if (options === undefined || options === null)
		options = {};

	var oldCards = $('.cards');
	$.post(
		"../ajax/getCardList.php",
		options,
		function(data)
		{
			var newCards = $(data);
			newCards.attr('hidden', 'true');
			oldCards.quicksand
			(
				newCards.children('.card'),
				{
					duration: 700,
					attribute: 'id',
					easing: 'easeInOutQuad'
				},
				function()
				{
					//$(".cardImg").ezpz_tooltip({contentId:"example-content-1"});
					//oldCards.selectable();
					//oldCards.sortable({
					//	delay: 1000
					//});
					oldCards.selectable({
						stop: function() {
							var result = $( "#select-result" ).empty();
								$( ".ui-selected.card", this ).each(function( ) {
							var index = $( this ).attr('id');
								result.append( " #" + ( index) );
				});
			}
		});
					//updateCardClickBinding();
				}
			);
		},
		'html'
	);
}

$(function() {
	$('.shuffle').click(function(e) {

		loadCards({sort_by: 'name', range: '0,54', from:'my collection'});
		e.preventDefault();
	});
	
	loadCards({range: '0,54'});
});

--></script>
</head>
<body>


<div id="header"> 
	<img src="../images/newbannertest.png"></img>
</div>
<div class="colmask leftmenu"> 
    <div class="colright"> 
        <div class="col1wrap"> 
			<div class="col1">

				<div class="cardList">
					<ul class="cards">
					</ul>
				</div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget massa libero. Nunc venenatis aliquet nulla id condimentum. Morbi eu lectus velit, ut hendrerit urna. Integer non porttitor risus. Cras mauris purus, aliquam et elementum quis, tempus eu enim. Aenean eget leo metus. Vivamus sagittis arcu vitae risus tincidunt euismod quis sit amet tellus. Vestibulum eu felis nec turpis rhoncus fringilla. Integer in justo quis velit cursus iaculis a vel odio. Donec lacinia fermentum auctor. Maecenas rhoncus felis vel urna elementum blandit. Maecenas lorem arcu, rutrum in mattis id, volutpat vel nisi. Mauris pellentesque sem eu lorem condimentum sed auctor turpis ultrices. Sed tristique sapien a justo commodo sed molestie nisi rutrum. Vestibulum dictum pretium massa, ac pretium leo tincidunt non. Cras vestibulum pharetra lectus ac molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet condimentum ultrices. Nam nisi magna, tempor eget elementum ut, egestas at diam.

				Vestibulum eu quam dui, cursus hendrerit dui. Praesent ut tellus sem. Curabitur id dolor eget velit congue hendrerit. Donec neque ante, porttitor quis pellentesque id, ultricies eget massa. Cras et nunc a tellus ultrices mattis sed non diam. Donec in lacus vel nibh vehicula posuere. Vestibulum sit amet ante lorem. Sed vel massa vitae mauris viverra ornare nec sit amet risus. Donec iaculis massa ut mi tempor vel euismod dui vulputate. In congue congue ipsum, eu malesuada ligula aliquet eget. Mauris enim dui, consectetur rutrum venenatis suscipit, bibendum et libero. Ut blandit mattis est quis volutpat. Nam placerat sodales est a convallis. Donec aliquam massa sit amet urna pharetra mattis. Sed mattis odio at purus rutrum volutpat. Aliquam commodo purus vel metus pellentesque dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus malesuada enim vitae velit tempor suscipit.

				Aenean eu lorem erat, tempus semper dui. Cras tincidunt, lectus suscipit porta sodales, lorem tortor pretium odio, semper mollis purus neque id nunc. Quisque consectetur leo vel orci dictum quis gravida augue placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh turpis, tristique vel fringilla eu, venenatis in augue. Praesent et purus non lectus volutpat eleifend. Pellentesque lobortis elit sit amet massa congue luctus. Aenean tincidunt enim non elit mollis rutrum. Vivamus sagittis imperdiet neque, sed mattis ligula cursus non. Aenean sodales ullamcorper lectus, id pellentesque nibh faucibus id. Etiam adipiscing, augue quis rutrum feugiat, nibh tortor ornare eros, et eleifend nisl nisi non velit. Maecenas laoreet magna et lorem facilisis molestie. Sed adipiscing orci eu neque ullamcorper sagittis. Donec quis luctus urna. Nulla gravida ipsum pellentesque nulla adipiscing ac scelerisque est elementum. Suspendisse massa tortor, commodo quis auctor ut, ornare ut enim.

				Duis tempor augue sed mauris mollis id tempus erat fringilla. Curabitur blandit scelerisque elit, quis adipiscing dui dapibus non. Ut dignissim, massa sed gravida varius, velit urna laoreet ipsum, vel venenatis turpis odio sit amet turpis. Nam eu metus lorem. Maecenas vel aliquam neque. Duis elementum mauris id augue vestibulum hendrerit. Nunc euismod tortor non lorem auctor ornare id eget nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dapibus, nisi ac cursus gravida, mauris nunc congue est, et sollicitudin libero est vitae mi. Donec auctor nulla quis diam adipiscing aliquet.

				Pellentesque pharetra pharetra tempus. Nullam fermentum arcu quis nisl facilisis eget vestibulum sem dignissim. Sed nec elit eget tellus laoreet cursus et et leo. Donec a diam blandit turpis dignissim gravida ac non dolor. Mauris at ante quis risus bibendum aliquet quis laoreet magna. In et tortor turpis, non commodo neque. Aliquam erat volutpat. Aliquam auctor eleifend neque, eu pretium mi aliquam id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et urna sed leo fermentum aliquet. Sed massa mi, condimentum a lobortis et, tincidunt vitae tellus. Curabitur nec nunc libero, sed tincidunt erat. Ut fringilla interdum nibh ac tempor..
				</p>
			</div>
		</div>

		<div class="col2">
			Hi <b><?php echo($drupalname); ?></b>!
			<br />
			<input type="text" name="cardname" value = "Card name"/> 
			<br /> 
			<input type="checkbox" name="newsletter" value="race" checked ="checked"/> 
			Race
			<br /> 
			<input type="checkbox" name="newsletter" value="aspect" checked ="checked"/> 
			Aspect
			<br /> 
			<input type="checkbox" name="newsletter" value="power" checked ="checked"/> 
			Power
			<br />
			<input type="checkbox" name="newsletter" value="minions" checked ="checked"/> 
			Minions
			<br />
			<p> <a class="shuffle" href="#dummy">Shuffle!</a> </p> 
						<span id="select-result">none</span>.
		</div>
	</div>
	
	<div>
		<div id="example-content-1">Tooltip content</div>
		
		<div id="footer">
			<br />
		</div>
	</div> 
	
	<div id="dock">
		<ul id='menu'>
			<li class="button"><a class='current' href='http://' >Home</a></li>
			<li class="button"><a href='http://'  >Store</a></li>
			<li class="button"><a href='http://'  >Trading</a></li>
			<li class="button"><a href='http://'  >My Collection</a></li>
			<li class="button"><a href='http://www.untoldthegame.com/forum'  target="_blank">Forums</a></li>
			<li class="button"><a href='http://'  >Character Builder</a></li>
		</ul>
	</div><!-- End of Nav Div -->
</div>

</body>
</html>


 